<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-click="tabClick">
      <el-tab-pane label="基本信息管理" name="first">
        <el-form ref="formData" :model="formData" label-width="80px">
          <el-form-item label="项目名称">
            <el-input v-model="formData.name" placeholder="项目名称" />
          </el-form-item>
          <el-form-item label="项目地址">
            <el-input v-model="formData.address" placeholder="项目地址" />
          </el-form-item>
          <el-form-item label="项目实景">
            <ImgUpload
              name="project"
              :image-url="imageUrl"
              @onSuccess="onSuccess"
              @beforeUpload="beforeUpload"
            />
          </el-form-item>
          <el-form-item label="项目介绍">
            <el-input v-model="formData.descri" rows="4" type="textarea" placeholder="项目介绍" />
          </el-form-item>
          <el-divider>地图显示设置</el-divider>
          <el-form-item label="缩放比例">
            <el-slider
              v-model="formData.maplevel"
              :min="minZoom"
              :max="maxZoom"
              show-input
            />
          </el-form-item>
          <el-form-item label="中心位置">
            <el-input v-model="formData.latlng" :disabled="true" placeholder="地图中心点位置经纬度" class="input-with-select">
              <el-button slot="append" icon="el-icon-s-promotion" @click="openPoiContainer">选择所在位置</el-button>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button>重置</el-button>
          </el-form-item>
        </el-form>
        <el-dialog
          title="选择所在位置"
          :visible.sync="baseDialogVisible"
          modal-append-to-body
          append-to-body
          fullscreen
        >
          <location ref="mark" :map-data="mapData" />
          <span slot="footer" class="dialog-footer">
            <el-button @click="baseDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="setPoi">确 定</el-button>
          </span>
        </el-dialog>
      </el-tab-pane>
      <el-tab-pane label="标准生育期管理" name="second">
        <list
          :plants="plants"
          @add="add"
          @edit="edit"
          @del="del"
        />
        <el-dialog
          v-el-drag-dialog
          :title="title"
          :visible.sync="dialogVisible"
          width="1450px"
        >
          <main-form
            :growth-form-data="growthFormData"
            @submit="submit"
          />
        </el-dialog>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import ImgUpload from '@/components/ImgUpload'
import Location from '@/components/Location'
import List from './component/list'
import MainForm from './component/main-form'
import { updateOne } from '@/api/project'
import { getAll } from '@/api/plant'
import UploadMixin from '@/mixin/UploadMixin'
import CommonMixin from '@/mixin/CommonMixin'
import { mapGetters } from 'vuex'
export default {
  components: {
    ImgUpload,
    Location,
    List,
    MainForm
  },
  mixins: [UploadMixin, CommonMixin],
  data() {
    return {
      activeName: 'first',
      dialogImageUrl: '',
      dialogVisible: false,
      minZoom: 3,
      maxZoom: 18,
      formData: {},
      mapData: {
        center: [39.460508, 115.851289],
        zoom: 18
      },
      baseDialogVisible: false,
      plants: [],
      growthFormData: {
        cropGrowthes: []
      }
    }
  },
  computed: {
    ...mapGetters(['project', 'crops', 'fields'])
  },
  created() {
    this.initial()
  },
  methods: {
    initial() {
      this.formData = this.project
      this.formData.maplevel = parseInt(this.formData.maplevel)
      this.formData.center = [this.formData.lat, this.formData.lng]
      this.formData.latlng = this.formData.center.join(',')

      this.mapData = {
        center: this.formData.center,
        zoom: this.formData.maplevel
      }
    },
    async onSubmit() {
      const { data, msg } = await updateOne(this.formData.id, this.formData)
      this.$store.commit('device/SET_PROJECT', data)
      this.$message.success(msg)
    },
    openPoiContainer() {
      this.baseDialogVisible = true
    },
    setPoi() {
      const gps = this.$refs.mark.getLocation()

      this.formData.lat = gps.lat.toFixed(6)
      this.formData.lng = gps.lng.toFixed(7)
      this.formData.center = [this.formData.lat, this.formData.lng]
      this.formData.latlng = this.formData.center.join(',')

      this.baseDialogVisible = false
    },
    submit(formData) {
      console.log(formData)
      this.$message.success('操作成功')
      this.dialogVisible = false
    },
    getOne(row) {
      this.formData = row
      this.dialogVisible = true
    },
    edit(row) {
      this.formData = row
      this.dialogVisible = true
    },
    add() {
      this.dialogVisible = true
    },
    tabClick(val) {
      if (val.name === 'second') {
        const fields = this.fields.filter(val => {
          return +val.project_id === +this.project.id
        })
        this.getPlants(fields)
      }
    },
    async getPlants(fields) {
      const { data } = await getAll({ field_ids: fields.map(val => val.id) })
      this.plants = data.data
    }
  }
}
</script>
<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
